<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    #container {
      width: 800px;
      height: 500px;
    }
    #sullivan-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      padding: 10px;
      background: #eee;
      margin: 10px;
    }

    .sullivan-container-wrap {
      border: 1px solid #ccc;
    }
    .sullivan-active {
      border: 1px solid #fb0c14;
    }
  </style>
  <script src="assets/jquery.js"></script>
</head>
<body>
<div id="container">
  <div id="sullivan-container"></div>
</div>
<script>
let activate = 0;
let screenSize = 11;
let column = 3;

const $container = $('#sullivan-container');
const width = $container.width();
const height = $container.height();

if (typeof screenSize === 'number') {
  const row = Math.ceil(screenSize / column);
  const itemWidth = Math.floor(width / column);
  const itemHeight = Math.ceil(height / row);
  console.log(itemWidth, row, itemHeight);
  new Array(screenSize).fill(null).forEach((_, index) => {
    const className = `sullivan-container-wrap ` + (index === 0 ? 'sullivan-active' : '');
    $container.append($(`<div class="${className}" style="width: ${itemWidth}px; height: ${itemHeight}px"/>`))
  })
}

$container.on('click', '.sullivan-container-wrap', function () {
  const active = 'sullivan-active';
  $(this).toggleClass(active).siblings(`.${active}`).removeClass(active);;
  // $(this).addClass(active).siblings(`.${active}`).removeClass(active)
})

</script>
</body>
</html>